<template>
  <div class="account">
    <div class="add-quota">
      <button class="quota-btn" @click="goPayment">添加额度</button>
    </div>
    <div class="quota">
      <div class="quota-title">
        <h4>我的额度</h4>
      </div>
      <div class="quota-list">
        <div class="quota-item">
          <img src="@img/recharge/used-recharge.png" alt="" />
          <p class="used">
            已使用:<span>{{ accountQuota.usedQuota }}</span>
          </p>
        </div>
        <div class="quota-item">
          <img src="@img/recharge/total-recharge.png" alt="" />
          <p class="total">
            总额:<span>{{ accountQuota.totalQuota }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="record">
      <div class="record-title">
        <h4>记录</h4>
      </div>
      <div class="scroll">
        <table class="table-wrapped">
          <thead class="table-thead">
            <tr>
              <th>编号</th>
              <th>记录</th>
              <th>时间</th>
              <th>类型</th>
              <th>备注</th>
            </tr>
          </thead>

          <tbody v-if="accountList.length" class="table-tbody" ref="tbodyRef">
            <tr
              v-for="item in showList"
              :key="item.id"
              :style="{ height: itemHeight + 'px' }"
            >
              <td>{{ item.serialNumber }}</td>
              <td>{{ item.consumption }}</td>
              <td>{{ item.type ? "消耗" : "充值" }}</td>
              <td>{{ item.updated }}</td>
              <td>{{ item.remarks }}</td>
            </tr>
          </tbody>
          <div class="record-not-data" v-else><p>暂无数据</p></div>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import {
  getAccountQuota,
  getAccountList,
  type IAccountItem,
} from "@api/account";

// 额度列表
const accountQuota = reactive({
  usedQuota: 0,
  totalQuota: 0,
});
// 记录列表
const accountList = ref<IAccountItem[]>([]);

let tbodyRef = ref(null);

// 定义单个高度
const itemHeight = ref(42);
let showNum = ref(0);
const showList = ref<IAccountItem[]>([]);

// 生命周期
onMounted(() => {
  queryQuota();
  queryAccountList();
});
// 用户账户总额度查询
const queryQuota = async () => {
  const res = await getAccountQuota();
  if (res.code != 0) return;
  accountQuota.totalQuota = res.data.totalQuota;
  accountQuota.usedQuota = res.data.usedQuota;
};
// 账户明细
const queryAccountList = async () => {
  const res = await getAccountList({
    page: 1,
    pagesize: 100,
  });
  if (res.code != 0) return;
  accountList.value = res.data.items;
  nextTick(() => {
    const height = tbodyRef.value?.offsetHeight;
    // 计算可视区域能放多少个dom +1是为了滚动
    showNum.value = Math.floor(height / itemHeight.value) + 1;
    // 截取数据
    showList.value = accountList.value.slice(0, showNum.value);
    // 监听滚动事件
    tbodyRef.value?.addEventListener("scroll", handleScroll);
  });
};
const handleScroll = (e: Event) => {
  // 截取开始位置
  let startIndex = Math.max(
    Math.ceil(e.target.scrollTop / itemHeight.value),
    0
  );
  // 截取结束位置
  let endIndex = Math.min(startIndex + showNum.value, accountList.value.length);
  console.log(startIndex, endIndex);
  // 截取
  showList.value = accountList.value.slice(startIndex, endIndex);
};
// 跳转到充值
const goPayment = () => {
  console.log("111");
};
</script>

<style lang="scss" scoped>
.account {
  height: 100%;
  display: flex;
  flex-direction: column;
  .add-quota {
    .quota-btn {
      width: 85px;
      height: 29px;
      background: #c90000;
      border-radius: 5px 5px 5px 5px;
      border: none;
      font-size: 12px;
      color: #ffffff;
      cursor: pointer;
    }
  }
  // 我的额度
  .quota {
    .quota-title {
      margin-top: 27px;
      h4 {
        margin: 0;
      }
    }
    .quota-list {
      height: 72px;
      border-radius: 7px 7px 7px 7px;
      border: 1px solid #dbdbdb;
      display: flex;
      padding: 0 22px;
      margin-top: 15px;
      .quota-item {
        display: flex;
        align-items: center;
        width: 222px;
        img {
          width: 13px;
          height: 13px;
        }
        p {
          margin-left: 7px;
          font-size: 12px;
          span {
            color: #ff3a3a;
            margin-left: 4px;
          }
        }
        .total span {
          color: #3ab7ff;
        }
      }
    }
  }
  .record {
    flex: 1;
    // background-color: #c90000;
    margin-top: 33px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    .record-title {
      h4 {
        margin: 0;
        font-size: 13px;
        color: #232323;
      }
    }
    .scroll {
      margin-top: 15px;
      flex: 1;
      overflow: auto;
      .table-wrapped {
        width: 100%;
        height: 100%;
        border-collapse: collapse;
        border-radius: 7px 7px 7px 7px;
        border: 1px solid #dbdbdb;
        display: flex;
        flex-direction: column;
        overflow: auto;
        .table-thead {
          width: 100%;
          background: #f9f9f9;
          height: 40px;
          border-radius: 7px 7px 7px 7px;
          font-size: 12px;
          color: #232323;
          border-bottom: 1px solid #dbdbdb;
          tr {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            th {
              flex: 1;
            }
          }
        }
        .table-tbody {
          flex: 1;
          overflow: auto;
          font-size: 12px;
          color: #232323;
          tr {
            width: 100%;
            display: flex;
            align-items: center;
            text-align: center;
            border-bottom: 1px solid #dbdbdb;
            td {
              flex: 1;
            }
          }
          tr:last-child {
            border-bottom: none; /* 移除最后一个tr的下边框 */
          }
        }
      }
      .record-not-data {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        color: #232323;
      }
    }
  }
}
</style>
